<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
	<link rel="stylesheet" href="/css/main.css">

  </head>
  <body>
    <div class="page-group">
        <div class="page page-current">
			  <!-- 工具栏 -->
            <nav class="bar bar-tab">
                <a class="tab-item external active" href="#">
                    <span class="icon icon-home"></span>
                    <span class="tab-label">精选</span>
                </a>
                <a class="tab-item external" href="#">
                    <span class="icon icon-gift"></span>
                    <span class="tab-label">活动</span>
                </a>
				 <a class="tab-item external" href="#">
                    <span class="icon icon-me"></span>
                    <span class="tab-label">我的</span>
                </a>
            </nav>

			  <!-- 这里是页面内容区 -->
            <div class="content infinite-scroll" data-distance="100">
				  <div class="my-top-tab">
					<div class="aaa"><a href="#" class="button button-round ">陕药集团大厦<span class="icon icon-caret"></span></a></div>
					<span class="icon icon-search my-top-right"></span>
				  </div>
				  <div class="buttons-tab">
						<a href="#tab1" class="tab-link active button">日间美食</a>
						<a href="#tab2" class="tab-link button">夜间美食</a>
						<a href="#tab3" class="tab-link button">预定</a>
				  </div>
				  <div class="content-block my-content-block">
					<div class="tabs">
					  <div id="tab1" class="tab active infinite-scroll">
						<div class="my-container-class">
 						 <div class="card my-card">
							<div class="card-content-inner my-card-content-inner">
								<div valign="bottom" class="card-header color-white no-border no-padding my-card-header">
									<a href="/a.html"><img class='card-cover' src="image/1.jpg" alt=""></a>
								</div>
							</div>
						  </div> 
						 <div class="content-padded grid-demo">
							<div class="row">
							 <div class="col-50 my-sm-card">
								<div class="item-media">
									<img src="image/1.jpg" class="rpic circle">
								</div>
								<div class="my-size">
									 <div class="my-card-size1">回坊</div>
									 <div class="my-card-size2">全亚洲的美食热爱</div>
								</div>
							 </div>
							 <div class="col-50 my-sm-card">
								<div class="item-media">
									<img src="image/1.jpg" class="rpic circle">
								</div>
								<div class="my-size">
									 <div class="my-card-size1">凉皮</div>
									 <div class="my-card-size2">面和米于力道之间</div>
								</div>
							 </div>
							</div><!-- end row-->

							<div class="row my-margin">
							 <div class="col-50 my-sm-card">
								<div class="item-media">
									<img src="image/1.jpg" class="rpic circle">
								</div>
								<div class="my-size">
									 <div class="my-card-size1">火锅</div>
									 <div class="my-card-size2">热爱你没道理</div>
								</div>
							 </div>
							 <div class="col-50 my-sm-card">
								<div class="item-media">
									<img src="image/1.jpg" class="rpic circle">
								</div>
								<div class="my-size">
									 <div class="my-card-size1">陕西特产</div>
									 <div class="my-card-size2">陕西美食全搜罗</div>
								</div>
							 </div>
							 </div> <!--end row -->
						</div><!--end grid-->
						  <div class="card demo-card-header-pic my-card">
							<div valign="bottom" class="card-header color-white no-border no-padding">
							  <a href="/a.html"><img class='card-cover' src="image/2.jpg" alt=""></a>
							</div>
							<div class="card-content">
							  <div class="card-content-inner">
								<span class="my-foot-size1"><b>德福源糕点</b></span><span class="my-foot-size2">老字号&nbsp;&nbsp;传承手工技艺</span><p></p>
								<div class="my-foot-size2">回坊/大麦市街/点心<span class="pull-right">13元/人</span></div>
							  </div>
							   <div class="card-footer"></div>
							</div>
						  </div>
						
						 <div class="card demo-card-header-pic my-card">
							<div valign="bottom" class="card-header color-white no-border no-padding">
							  <a href="/a.html"><img class='card-cover' src="image/3.jpg" alt=""></a>
							</div>
							<div class="card-content">
							  <div class="card-content-inner">
								<span class="my-foot-size1"><b>柿子糊塔</b></span><span class="my-foot-size2">老字号&nbsp;&nbsp;传承手工技艺</span><p></p>
								<div class="my-foot-size2">回坊/大麦市街/点心<span class="pull-right">3元/个</span></div>
							  </div>
							  <div class="card-footer"></div>
							</div>
						  </div>
						</div><!-- end my-container-class无限滚动容器 -->
							  
						    <!-- 加载提示符 -->
						  <div class="infinite-scroll-preloader">
							<div class="preloader">
							</div>
						  </div>
						</div><!--end tab1-->
					  <div id="tab2" class="tab">
						<div class="content-block my-content-block">
						  <div class="card my-card">
							<div class="card-content-inner my-card-content-inner">
								<div valign="bottom" class="card-header color-white no-border no-padding">
									<img class='card-cover' src="image/4.jpg" alt="">
								</div>
							</div>
						  </div> 
						</div>
						<div class="card demo-card-header-pic my-card my-margin">
							<div valign="bottom" class="card-header color-white no-border no-padding">
							  <img class='card-cover' src="image/5.jpg" alt="">
							</div>
							<div class="card-content">
							  <div class="card-content-inner">
								<span class="my-foot-size1"><b>夜宵泡馍</b></span><span class="my-foot-size2">老字号&nbsp;&nbsp;传承手工技艺</span><p></p>
								<div class="my-foot-size2">回坊/大麦市街/泡馍<span class="pull-right">25元/人</span></div>
							  </div>
							  <div class="card-footer"> </div>
							</div>
						 </div>
					  </div><!--end tab2--> 						 

					  <div id="tab3" class="tab">
						<div class="content-block my-content-block ">
						  <div class="my-order">
							<div valign="bottom" class="card-header color-white no-border no-padding my-pasition my-padd">
							  <img class='card-cover' src="image/6.jpg" alt="">
							  <div  class="my-pasition-middle">
								  <div>
									<img class='card-cover my-pasition-center' src="image/7.jpg" alt="">
								  </div>
								<span class="my-font">0815-1015</span>
								</div>
							</div>
						  </div>
						   <div class="my-order">
							<div valign="bottom" class="card-header color-white no-border no-padding my-pasition my-padd">
							   <div  class="my-pasition-middle">
								  <div>
									<img class='card-cover my-pasition-center' src="image/9.jpg" alt="">
								  </div>
								<span class="my-font">0815-1015</span>
								</div>
								<img class='card-cover my-right' src="image/8.jpg" alt="">
							</div>
						  </div>
						</div><!--end content-block-->
					  </div><!--end tab3--> 
					</div><!--end tabs-->
				  </div><!-- end content-block-->
				 </div><!-- end content-->
			 </div><!--end page-->
		
    </div>
	<!-- popup, panel 等放在这里 -->
    <div class="panel-overlay"></div>
	 <!-- Left Panel with Reveal effect -->
    <div class="panel panel-left panel-reveal">
        <div class="content-block">
            <p>这是一个侧栏</p>
            <p></p>
            <!-- Click on link with "close-panel" class will close panel -->
            <p><a href="#" class="close-panel">关闭</a></p>
        </div>
    </div>



    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script>
		$(document).on("pageInit", function() {
		  //多个标签页下的无限滚动
		  var loading = false;
		  // 每次加载添加多少条目
		  var itemsPerLoad = 1;
		  // 最多可加载的条目
		  var maxItems = 4;
		  var lastIndex = $('.my-container-class .card')[0].length;
		  function addItems(number, lastIndex) {
			// 生成新条目的HTML
			var html = '';
			console.log("lastIndex "+lastIndex + " number"+number);
			for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
				$.get("/b.php",function(data){
				console.log(i);
					html += data;
					<!-- 浏览器的异步-->// 添加新条目 
					$('.infinite-scroll.active .my-container-class').append(html);		
				});
			}
			console.log('nnn'+html);
		  }
		  $(document).on('infinite', function() {
			console.log('AAAAAAAA')
			// 如果正在加载，则退出
			if (loading) return;
			// 设置flag
			loading = true;
			var tabIndex = 0;
			if($(this).find('.infinite-scroll.active').attr('id') == "tab1"){
			  tabIndex = 0;
			}
		   
			lastIndex = $('.my-container-class').eq(tabIndex).find('.card').length;
			// 模拟1s的加载过程
			setTimeout(function() {
			  // 重置加载flag
			  loading = false;
			  if (lastIndex >= maxItems) {
				// 加载完毕，则注销无限加载事件，以防不必要的加载:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多个无线滚动请自行根据自己代码逻辑判断注销时机
				// 删除加载提示符
				$('.infinite-scroll-preloader').eq(tabIndex).hide();
				return;
			  }
			  addItems(itemsPerLoad,lastIndex);
			  // 更新最后加载的序号
			  lastIndex =  $('.my-container-class').eq(tabIndex).find('.card').length;
			  $.refreshScroller();
			}, 1000);
		  });
	  });
	</script>
	<script>
		$(".my-sm-card").on('click',function(){
			window.location.href="e.html";
		});
	
	</script>

<!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->
	<script>$.init()</script>
	
  </body>
</html>